<template>
    <div class="item_detail goodDetail">
        <span id="navbar"></span>
        <van-sticky>
            <div class="navBar">
                <div class="navBar-sides navBar-left">
                    <van-icon name="arrow-left" @click="$router.go(-1)"/>
                </div>
                <div class="navBar-center">
                    <span @click="tpNavBar(0, 'navbar')">商品</span>
                    <span @click="tpNavBar(1, 'xiangqing')">详情</span>
                    <span @click="tpNavBar(2, 'pingjia')">评价</span>
                    <span @click="tpNavBar(3, 'tuijian')">推荐</span>
                    <div :style="'left:' + navLeftPosition + '%'"></div>
                </div>
                <div class="navBar-sides navBar-right">
                    <van-icon name="share"/>
                </div>
            </div>
        </van-sticky>
        <van-swipe>
            <van-swipe-item v-for="(image, index) in goods.info.gallery" :key="index">
                <img v-lazy="image" width="100%" :height="winWidth">
            </van-swipe-item>
        </van-swipe>
        <van-cell-group class="item_cell_group" v-if="goods">
            <van-cell class="item_info">
                <div>
                    <span style="font-size:18px;color: #f2270c">￥</span>
                    <span style="font-size: 26px;color: #f2270c;">
                        {{ goods && goods.info && goods.info.retailPrice ? goods.info.retailPrice : '0.00' }}
                    </span>
                    <span style="float: right;text-align: center;display: flex;flex-direction:column;"
                          @click="addCollect">
                        <van-icon name="like-o" style="font-size:20px;" :style="'color:' + goods.userHasCollect"/>
                        <span style="font-size: 12px">收藏</span>
                    </span>
                    <!--                    <span class="item_price">{{ goods.info.retailPrice*100 | yuan }}-->
                    <span v-show="goods && goods.info && goods.info.modelPrice">+ {{ goods.info.modelPrice }}
                            <span style="font-size: 12px">模豆</span>
                    </span>
                    <!--                    </span>-->

                </div>
                <span class="item_market_price">{{goods.info.counterPrice*100 | yuan}}</span>
                <div class="item-title">
                    {{ goods.info.name }}
                </div>
                <div class="item_intro">{{goods.info.brief}}</div>
                <span style="font-size: 12px;color: #666666">
                    大促返场：全店折后3件8折/3件5折，满5件低至3折！详情点击进入！ <span style="color: #f2270c">查看></span>
                </span>
            </van-cell>
        </van-cell-group>

        <div class="item_cell_group">
            <div style="width: 100%;height: 50px;background-color:#fff;line-height: 50px;display: flex;justify-content:space-between;border-bottom: #f2f2f2 solid 1px"
                 @click="skuClick">
                <span style="width: 20%;text-align: center;font-size: 13px;font-weight: bold;">已选</span>
                <span style="width: 70%;color: #666666">{{ skuselected ? skuselected : '请选择'}}</span>
                <span style="width: 10%"><van-icon name="ellipsis" style="line-height: 50px;font-size: 20px;"/></span>
            </div>

            <!--收货地址组件-->
            <!--            <getaddress/>-->

            <div style="width: 100%;height: 50px;background-color:#fff;line-height: 50px;display: flex;justify-content:space-between;">
                <span style="width: 20%;text-align: center;font-size: 13px;font-weight: bold;">运费</span>
                <span style="width: 70%;color: #666666">免运费</span>
                <span style="width: 10%"><van-icon name="ellipsis"/></span>
            </div>


            <span id="pingjia"></span>

            <div style="width: 100%;background-color:#f7f8fa;line-height: 30px;border-bottom: #f2f2f2 solid 1px;padding: 0 20px"
                 @click="propsPopup = true">
                <van-icon name="certificate" color="red"/>
                <span style="margin-right: 30px;font-size: 12px;color: #999999">店铺发货&售后</span>
                <van-icon name="certificate" color="red"/>
                <span style="margin-right: 30px;font-size: 12px;color: #999999">7天无理由退货</span>
            </div>

            <!--            <van-cell-group>-->
            <!--                <van-cell-->
            <!--                        title="规格"-->
            <!--                        isLink-->
            <!--                        value="请选择"-->
            <!--                        @click.native="skuClick"-->
            <!--                />-->
            <!--                <van-cell title="属性" isLink @click.native="propsPopup = true"/>-->
            <!--                <van-cell title="运费" value="满88免邮费"/>-->
            <!--            </van-cell-group>-->
            <van-sku
                    v-model="showSku"
                    :sku="sku"
                    :hide-stock="false"
                    :goods="skuGoods"
                    :goodsId="goods.info.id"
                    @buy-clicked="buyGoods"
                    @add-cart="addCart"
                    close-on-click-overlay
                    @sku-selected="selectedsku"
                    ref="skuselected"
            >
                <!-- 自定义 sku-header-price -->
                <template slot="sku-header-price" slot-scope="props">
                    <div class="van-sku__goods-price">
                        <span class="van-sku__price-symbol">￥</span>

                        <span class="van-sku__price-num">{{ props.price }}
                            <span v-if="props.selectedSkuComb && props.selectedSkuComb.modelPrice">
                                + {{ props.selectedSkuComb.modelPrice }}
                            </span>
                            <span style="font-size: 12px" v-if="props.selectedSkuComb && props.selectedSkuComb.modelPrice">模豆</span>
                        </span>
                    </div>

                    <div @click="showSku = false" style="position: absolute;right: 20px;top: 20px;width: 22px;height: 22px;background-color:#e5e5e5;border-radius: 50%;box-sizing: border-box;padding: 3px">
                        <van-icon name="cross" size="16px" color="#999" />
                    </div>

                    <div slot="sku-header-extra" style="font-size: 12px;color: #999999;margin-top: 8px;">
                        <!--{{debugSku(props)}}-->
                        编号：<span>{{props.selectedSkuComb ? props.selectedSkuComb.sn : goods.info.id}}</span>
                    </div>

                </template>
            </van-sku>

            <van-popup v-model="propsPopup" position="bottom">
                <popup-props :propsStr="props_str"></popup-props>
            </van-popup>
        </div>

        <div style="margin-top: 10px">
            <div style="width: 100%;height: 50px;background-color:#fff;line-height: 50px;display: flex;justify-content:space-between;border-bottom: #f2f2f2 solid 1px">
                <span style="width: 20%;text-align: center;font-size: 13px;font-weight: bold;">活动</span>
                <span style="width: 78%;color: #666666">暂无活动</span>
                <span style="width: 2%"></span>
            </div>
        </div>

        <div style="margin-top: 10px">
            <div @click="$router.push({name:'evaluation',query:{goodId : goods.info.id}})"
                 style="width: 100%;height: 50px;background-color:#fff;line-height: 50px;display: flex;justify-content:space-between;border-bottom: #f2f2f2 solid 1px;">
                <span style="width: 20%;text-align: center;font-size: 13px;font-weight: bold;">
                    <span style="width: 3px;height: 11px;background-color:red;display: inline-block;background-image: linear-gradient(#D65948, #e9c6c2);"></span>
                    评价
                    <span style="font-size: 12px;font-weight: normal">{{ evaluation.total }}</span>
                </span>
                <span style="width: 50%;color: #666666"></span>
                <span style="width: 30%;display: flex;justify-content: space-around">
                    <span style="font-size: 12px;color: #999999">好评度100%</span>
                    <van-icon name="arrow" style="line-height: 50px;font-size: 20px;"/>
                </span>
            </div>

            <div style="width: 100%;background-color:#fff;">
                <div style="width: 100%;background-color:#fff;padding: 10px 20px;border-bottom: 1px solid #f2f2f2"
                     v-for="(v,k) in evaluation.list">
                    <div style="width: 100%; height: 40px;display: flex">
                        <img style="width: 40px;height: 40px;border-radius: 50%;"
                             :src="v.userInfo.avatarUrl ? v.userInfo.avatarUrl : 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2441479199,3701248645&fm=26&gp=0.jpg'">
                        <div style="margin-left:10px;display: flex;flex-direction: column;justify-content: space-around">
                            <span style="font-size: 13px;line-height: 20px">{{v.userInfo.nickName}}</span>
                            <van-rate v-model="v.star" readonly color="red"/>
                        </div>
                    </div>
                    <div style="padding: 10px 0;line-height: 22px;font-size: 14px;color: #333333">
                        <p>{{ v.content }}</p>
                        <van-row gutter="5" style="margin-top: 10px" v-if="v.img">
                            <van-col span="8" v-for="(v,k) in 5">
                                <img :src="v.img"
                                     width="100%">
                            </van-col>
                        </van-row>
                    </div>
                    <div style="color: #999999;font-size: 12px;line-height: 20px">{{ v.skuid }}</div>
                </div>
            </div>

            <span id="tuijian"></span>

            <div style="background-color:#fff;padding: 15px">
                <div @click="$router.push({name:'evaluation'})"
                     style="width: 150px;line-height: 30px;border: 1px solid #999999;text-align: center;border-radius: 60px;position: relative;left: 50%;margin-left: -75px">
                    查看全部评论
                </div>
            </div>

            <div style="margin-top:10px;width: 100%;height: 50px;background-color:#fff;line-height: 50px;display: flex;justify-content:space-between;">
                            <span style="width: 30%;text-align: center;font-size: 13px;font-weight: bold;">
                                <span style="width: 3px;height: 11px;background-color:red;display: inline-block;background-image: linear-gradient(#D65948, #e9c6c2);"></span>
                                暂无问答
                                <span style="font-size: 12px;font-weight: normal;color: #ffffff">1</span>
                            </span>
                <span style="width: 50%;color: #666666"></span>
                <span style="width: 30%;display: flex;justify-content: space-around"> </span>
            </div>
            <div style="width: 100%;background-color:#fff;line-height: 50px;padding: 30px 10px">
                <p style="width:100%;height:50px;text-align: center;">
                    <van-icon name="question-o" color="rgb(79, 110, 142)" size="18px"/>
                    商品好不好问问买过的人吧
                </p>
                <div style="width: 100px;line-height: 30px;border: 1px solid #999999;text-align: center;border-radius: 60px;position: relative;left: 50%;margin-left: -50px">
                    问问大家
                </div>
            </div>

        </div>


        <div style="margin-top: 10px" class="randomGoods">
            <van-tabs>
                <van-tab title="为你推荐" style="background-color:#fff;">
                    <van-row gutter="5" style="padding: 0 5px">
                        <van-col span="8" class="rec-goods-item" v-for="(item, i) in qgr">
                            <img :src="item.picUrl" alt="" class="randomGoodsImg">
                            <p class="randomGoodsP">
                                {{ '￥' + item.retailPrice }}
                                <span>{{item.modelPrice ? '+ ' + item.modelPrice + '模豆' : null  }}</span>
                            </p>
                        </van-col>
                    </van-row>
                </van-tab>
                <van-tab title="排行榜" style="background-color:#fff;">
                    <van-row gutter="5" style="padding: 0 5px">
                        <van-col span="8" class="rec-goods-item" v-for="(item, i) in qgr">
                            <img :src="item.picUrl" alt="" class="randomGoodsImg">
                            <p class="randomGoodsP">
                                {{ '￥' + item.retailPrice }}
                                <span>{{item.modelPrice ? '+ ' + item.modelPrice + '模豆' : null  }}</span>
                            </p>
                        </van-col>
                    </van-row>
                </van-tab>
            </van-tabs>
        </div>

        <span id="xiangqing"></span>

        <div class="yangshang" style="margin-top: 10px">
            <img src="./5.jpg" alt="">
        </div>


        <div class="item_desc">
            <!--            <div class="item_desc_title">商品详情</div>-->
            <div class="item_desc_wrap" v-if="goods.info.detail" v-html="goods.info.detail"></div>
            <div class="item_desc_wrap" v-else style="text-align: center;">
                <p>无详情</p>
            </div>
        </div>


        <van-goods-action>
            <van-goods-action-icon @click="clickToast" icon="chat-o" text="联系客服"/>
            <van-goods-action-icon @click="clickToast" icon="shop-o" text="店铺"/>
            <van-goods-action-icon @click="toCart" icon="cart-o" :info="(cartInfo > 0) ? cartInfo : ''" text="购物车"/>
            <van-goods-action-button type="warning" @click="skuClick" text="加入购物车"/>
            <van-goods-action-button type="danger" @click="skuClick" text="立即购买"/>
        </van-goods-action>

    </div>
</template>

<script>

    import {
        goodsDetail,
        cartGoodsCount,
        collectAddOrDelete,
        cartAdd,
        cartFastAdd,
        goodsDetailRandomGoods,
        CommentList
    } from '@/api/api';

    import {Sku, Swipe, SwipeItem, GoodsAction, GoodsActionButton, GoodsActionIcon, Popup, Toast} from 'vant';
    import {setLocalStorage} from '@/utils/local-storage';
    import popupProps from './popup-props';
    import _ from 'lodash';
    import getaddress from './getaddress';
    import scrollFixed from "@/mixin/scroll-fixed";


    export default {
        mixins: [scrollFixed],
        props: {
            itemId: [String, Number]
        },

        data() {
            const isLogin = !!localStorage.getItem('Authorization');

            return {
                winWidth: document.body.clientWidth,
                isLogin,
                goods: {
                    userHasCollect: '',
                    info: {
                        gallery: []
                    }
                },
                sku: {
                    tree: [],
                    list: [],
                    price: '1.00', // 默认价格（单位元）
                    model_price: '100',
                    closeClickOverlay:'true'
                },
                skuGoods: {
                    // 商品标题
                    title: '',
                    // 默认商品 sku 缩略图
                    picture: ''
                },
                cartInfo: 0,
                selectSku: {
                    selectedNum: 1,
                    selectedSkuComb: {
                        sku_str: 'aa'
                    }
                },
                propsPopup: false,
                showSku: false,
                skuselected: '',
                currentIndex: 0,//navbar小横线
                navLeftPosition: 0,//navbar小横线
                scrollJump: '',
                qgr: [], //为你推荐和排行榜
                evaluation: []//评价
            };
        },

        computed: {
            props_str() {
                let props_arr = [];
                _.each(this.goods.attribute, json => {
                    props_arr.push([json['attribute'], json['value']]);
                });
                return props_arr || [];
            },
        },

        mounted() {
            window.addEventListener('scroll', this.handleScroll, true)
        },

        created() {
            this.randomGoods()
            this.initData()
        },

        methods: {
            handleScroll(e) {
                const visible = window.pageYOffset > this.visibilityHeight
                // const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                this.scrollJump = e.target.scrollTop;
                // console.log(this.scrollJump)
                if (this.scrollJump >= 730 && this.scrollJump < 940) {
                    this.currentIndex = 1
                }
                if (this.scrollJump >= 1470) {
                    this.currentIndex = 2
                }
                if (this.scrollJump >= 940 && this.scrollJump < 1470) {
                    this.currentIndex = 3
                }
                if (this.scrollJump >= 0 && this.scrollJump < 730) {
                    this.currentIndex = 0
                }
            },

            clickToast() {
                Toast('此功能正在开发中')
            },
            addCollect() {
                collectAddOrDelete({valueId: this.itemId, type: 0}).then(res => {
                    if (this.goods.userHasCollect == '#f7b444') {
                        this.goods.userHasCollect = '';
                    } else {
                        this.goods.userHasCollect = '#f7b444';
                        this.$toast({
                            message: '收藏成功',
                            duration: 1500
                        });
                    }
                }).catch(error => {
                    Toast(error.data.errmsg)
                });
            },
            skuClick() {
                this.showSku = true;
            },

            randomGoods() {
                //    获取为你推荐和排行榜
                goodsDetailRandomGoods().then(res => {
                    this.qgr = res.data.data
                }).catch(error => {
                    Toast(error && error.data ? error.data.errmsg : '数据已失效')
                })
            },

            async initData() {
                //详情
                const res = await goodsDetail({id: this.itemId});
                if (!res || !res.data) {
                    Toast('数据已失效')
                    return;
                }
                this.goods = res.data.data
                this.skuAdapter();

                //
                cartGoodsCount().then(res => {
                    this.cartInfo = res.data.data;
                }).catch(error => {
                    Toast(error && error.data ? error.data.errmsg : '数据已失效')
                });

                //评论
                CommentList({
                    type: 0,
                    valueId: this.goods.info.id,
                    showType: 0,
                    page: 1,
                    limit: 2
                }).then(res => {
                    this.evaluation = res.data.data
                })
            },
            toCart() {
                this.$router.push({
                    name: 'cart'
                });
            },

            getProductId(s1, s2) {
                var productId;
                var s1_name;
                var s2_name;
                _.each(this.goods.specificationList, specification => {
                    _.each(specification.valueList, specValue => {
                        if (specValue.id === s1) {
                            s1_name = specValue.value;
                        } else if (specValue.id === s2) {
                            s2_name = specValue.value;
                        }
                    });
                });

                _.each(this.goods.productList, v => {
                    let result = _.without(v.specifications, s1_name, s2_name);
                    if (result.length === 0) {
                        productId = v.id;
                    }
                });
                return productId;
            },
            getProductIdByOne(s1) {
                var productId;
                var s1_name;
                _.each(this.goods.specificationList, specification => {
                    _.each(specification.valueList, specValue => {
                        if (specValue.id === s1) {
                            s1_name = specValue.value;
                            return;
                        }
                    });
                });

                _.each(this.goods.productList, v => {
                    let result = _.without(v.specifications, s1_name);
                    if (result.length === 0) {
                        productId = v.id;
                    }
                });
                return productId;
            },
            addCart(data) {
                let that = this;
                let params = {
                    goodsId: data.goodsId,
                    number: data.selectedNum,
                    productId: 0
                };
                if (_.has(data.selectedSkuComb, 's3')) {
                    this.$toast({
                        message: '目前仅支持两规格',
                        duration: 1500
                    });
                    return;
                } else if (_.has(data.selectedSkuComb, 's2')) {
                    params.productId = this.getProductId(
                        data.selectedSkuComb.s1,
                        data.selectedSkuComb.s2
                    );
                } else {
                    params.productId = this.getProductIdByOne(data.selectedSkuComb.s1);
                }
                cartAdd(params).then(() => {
                    this.cartInfo = this.cartInfo + data.selectedNum;
                    this.$toast({
                        message: '已添加至购物车',
                        duration: 1500
                    });
                    that.showSku = false;
                });
            },
            buyGoods(data) {
                let that = this;
                let params = {
                    goodsId: data.goodsId,
                    number: data.selectedNum,
                    productId: 0
                };
                if (_.has(data.selectedSkuComb, 's3')) {
                    this.$toast({
                        message: '目前仅支持两规格',
                        duration: 1500
                    });
                    return;
                } else if (_.has(data.selectedSkuComb, 's2')) {
                    params.productId = this.getProductId(
                        data.selectedSkuComb.s1,
                        data.selectedSkuComb.s2
                    );
                } else {
                    params.productId = this.getProductIdByOne(data.selectedSkuComb.s1);
                }
                cartFastAdd(params).then(res => {
                    let cartId = res.data.data;
                    setLocalStorage({CartId: cartId});
                    that.showSku = false;
                    this.$router.push('/order/checkout');
                }).catch(error => {
                    Toast(error.data.errmsg)
                });
            },
            skuAdapter() {
                const tree = this.setSkuTree();
                const list = this.setSkuList();
                const skuInfo = {
                    price: parseInt(this.goods.info.retailPrice), // 未选择规格时的价格
                    stock_num: 0, // TODO 总库存
                    collection_id: '', // 无规格商品skuId取collection_id，否则取所选sku组合对应的id
                    none_sku: false, // 是否无规格商品
                    hide_stock: true
                };
                this.sku = {
                    tree,
                    list,
                    ...skuInfo
                };
                this.skuGoods = {
                    title: this.goods.info.name,
                    picture: this.goods.info.picUrl
                };
            },
            tpNavBar(ids, path) {
                window.location.hash = '#' + path
                this.navLeftPosition = ids * 25
                this.currentIndex = ids
            },
            setSkuList() {
                var sku_list = [];
                console.log(this.goods.productList)
                _.each(this.goods.productList, v => {
                    var sku_list_obj = {};
                    _.each(v.specifications, (specificationName, index) => {
                        sku_list_obj['s' + (~~index + 1)] = this.findSpecValueIdByName(
                            specificationName
                        );
                    });
                    sku_list_obj.price = v.price * 100;
                    sku_list_obj.stock_num = v.number;
                    sku_list_obj.modelPrice = v.modelPrice ? v.modelPrice : this.goods.info.modelPrice;
                    sku_list_obj.sn = v.goodsId + '' + v.id;
                    sku_list_obj.picUrl = v.url;

                    sku_list.push(sku_list_obj);
                });
                return sku_list;
            },
            debugSku(props){
                //console.log(props, '--------------')
            },
            selectedsku() {
                this.skuselected = ''

                for (let i in this.$refs.skuselected.selectedSkuValues) {
                    if (i != 0) {
                        this.skuselected += '，' + this.$refs.skuselected.selectedSkuValues[i].name
                    } else {
                        this.skuselected += this.$refs.skuselected.selectedSkuValues[i].name
                    }
                }
            },

            findSpecValueIdByName(name) {
                let id = 0;
                _.each(this.goods.specificationList, specification => {
                    _.each(specification.valueList, specValue => {
                        if (specValue.value === name) {
                            id = specValue.id;
                            return;
                        }
                    });
                    if (id !== 0) {
                        return;
                    }
                });
                return id;
            },
            setSkuTree() {
                let that = this;
                let specifications = [];
                _.each(this.goods.specificationList, (v, k) => {
                    let values = [];
                    _.each(v.valueList, vv => {
                        vv.name = vv.value;
                        values.push({
                            id: vv.id,
                            name: vv.value,
                            imgUrl: vv.picUrl
                        });
                    });

                    specifications.push({
                        k: v.name,
                        v: values,
                        k_s: 's' + (~~k + 1)
                    });

                });
                return specifications;
            }
        }
        ,

        components: {
            [Popup.name]:
            Popup,
            [Swipe.name]:
            Swipe,
            [SwipeItem.name]:
            SwipeItem,
            [Sku.name]:
            Sku,
            [GoodsAction.name]:
            GoodsAction,
            [GoodsActionButton.name]:
            GoodsActionButton,
            [GoodsActionIcon.name]:
            GoodsActionIcon,
            [popupProps.name]:
            popupProps,
            getaddress: getaddress
        }
    }
    ;
</script>

<style lang="scss" scoped>

    .navBar {
        width: 100%;
        display: flex;
        justify-content: space-between;
        background-color: #fff;

        .navBar-sides {
            height: 50px;
            background-color: #fff;
            width: 15%;
            display: flex;
            justify-content: center;
        }

        .navBar-center {
            height: 50px;
            background-color: #fff;
            width: 60%;
            display: flex;
            justify-content: space-around;
            line-height: 50px;
            position: relative;

            div {
                width: 25%;
                height: 3px;
                background-color: #ee0a24;
                position: absolute;
                bottom: 0;
                left: 0;
                transition: left 200ms;
            }

            span {

            }
        }

        .navBar-sides .van-icon {
            font-size: 20px;
            line-height: 50px;
            color: #333333;
        }

        .navBar-right .van-icon {
            font-size: 22px;

        }
    }


    //收藏改变颜色
    //.item_info .van-icon{
    //    color: red;
    //}

    //图片
    .yangshang img {
        width: 100%;
        margin-bottom: 8px;
    }

    .yangshang img:nth-last-child(2) {
        margin: 0;
    }

    .yangshang img:nth-last-child(1) {
        margin: 0;
    }


    .item_detail {
        overflow-x: hidden;

        img {
            max-width: 100%;
        }
    }

    .item_cell_group {
        margin-bottom: 10px;
    }

    .item_price {
        font-size: 20px;
        color: $red;
        margin-right: 10px;
    }

    .item_market_price {
        color: $font-color-gray;
        text-decoration: line-through;
        font-size: $font-size-small;
    }

    .item-title {
        line-height: 1.4;
        font-size: 16px;
        font-weight: bold;
    }

    .item_dispatch {
        font-size: $font-size-small;
        color: $font-color-gray;
    }

    .item_intro {
        line-height: 18px;
        margin: 5px 0;
        font-size: $font-size-small;
        color: $font-color-gray;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .item_desc {
        background-color: #fff;

        /deep/ p {
            //padding: 0 10px;
            margin-block-start: 0 !important;
            margin-block-end: 0 !important;
        }

        /deep/ img {
            max-width: 100%;
            display: block;
        }
    }

    .item_desc_title {
        @include one-border;
        padding: 10px 0;
        text-align: center;
    }

    .rec-goods-item {
        text-align: center;
    }

    .randomGoods .rec-goods-item {
        position: relative;
        overflow: hidden;
    }

    .randomGoodsRow {
    }

    .randomGoodsP {
        width: calc(100% - 5px);
        /*width: 100%;*/
        position: absolute;
        left: 2.5px;
        bottom: 5px;
        line-height: 20px;
        background-color: rgba(0, 0, 0, 0.5);
        color: #ffffff;
        font-size: 12px;
    }
</style>
